﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        body {
            font-family:'Microsoft YaHei';
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s3-5/s3-5-bg.jpg');
            background-repeat: no-repeat;
            width: 1920px;
            height: 1080px;
        }
        em {
            color: #fff100;
            font-style: normal;
            font-size: 18pt;
            vertical-align: middle;
            margin-left: 5px;
        }

        .countText {
            color: #fff100;
            font-size: 42pt;
            font-weight: bold;
        }
        #table{
            margin-top:20px;
            margin-left:10px;
        }
        #table .row {
            width: 590px;
            height:55px;
        }
            #table .row .col1 {
                float: left;
                font-size: 24px;
                width: 78px;
                height: 45px;
                text-align: center;
                margin-top: 10px;
            }
            #table .row .col2 {
                float: left;
                font-size: 18px;
                height: 45px;
                width: 280px;
                text-align: left;
                margin-left: 15px;
                margin-top: 10px;
            }
            #table .row .col2r2 {
                float: left;
                font-size: 18px;
                height: 45px;
                width: 280px;
                text-align: left;
                margin-left: 15px;
                margin-top: 3px;
            }
            #table .row .col3 {
                float: left;
                font-size: 20px;
                height: 45px;
                width: 170px;
                text-align: left;
                margin-left: 15px;
                margin-top: 10px;
            }
                #table .row .col3 b {
                    color: #fff000;
                }
    </style>
    <title>堆场</title>
</head>
<body>
    <div id="container" style="height: 100%"></div>
    <div style="color:#fff; width:590px; position:absolute; left:1280px; top:65px;">
        <div id="title" style="font-size:32px; margin-left:110px; margin-top:0px; height:65px;"></div>
        <div id="table">
        </div>
    </div>
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script type="text/javascript" src="assets/echarts/map/jiangsu.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
    <script src="./content/s3-1-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        var g_datArea = null;

        // 转换为map数据需要的数据结构
        // mapdata:   {names:[],values:[]}
        function convertMapData(mapData) {
            var lData = [];
            for (var index = 0; index < mapData.names.length; index++) {
                lData.push({ name: mapData.names[index], value: mapData.values[index] });
            }
            return lData;
        }

        // posData:    coordMap:{name:[]}
        // nvData:   {names:[],values:[]}
        function convertMapPosData(posData, nvData) {
            var lData = [];
            for (var name in posData.coordMap) {
                for (var index = 0; index < nvData.names.length; index++) {
                    if (name == nvData.names[index]) {
                        posData.coordMap[name].push(nvData.values[index]);
                        if (name == '澳门' || name=='北京' || name=='安徽') {
                            lData.push({
                                name: name,
                                value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                label: {
                                    normal: {
                                        position: 'left',
                                    }
                                }
                            });
                        } else if (name == '江苏') {
                            lData.push({
                                name: name,
                                value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                label: {
                                    normal: {
                                        position: 'right',
                                        offset:[0,-10]
                                    }
                                }
                            });
                        } else {
                            lData.push({
                                name: name,
                                value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                label: {
                                    normal: {
                                        position: 'right'
                                    }
                                }
                            });
                        }
                        break;
                    }
                }
            }
            return lData;
        }
		
		var g_datAreaTop5Colors = ['#fe2020','#fe2a2a','#ff7e28','#fea41c','#ffd119','#ffff18','#b3e814','#1ed21e','#18d118','#43d943'];
		function convertProvinceCountTop5Data(data){
			var result = [];
			for(var index = 0; index < data.length; index++){
				result.push({value:data[index], 
					itemStyle:{
						normal:{
							color:g_datAreaTop5Colors[index]
						}
					}});
			}
			return result;
		}
		function convertCompanyAreaTop10(data) {
		    var result = [];
		    for (var index = data.length - 1; index >=0; index--) {
		        result.push({
		            value: data[index],
		            itemStyle: {
		                normal: {
		                    color: g_datAreaTop5Colors[index]
		                }
		            }
		        });
		    }
		    return result;
		}

		var g_topDcColor = ['#ff0000', '#ff2f2f', '#ff4b4b', '#eb6100', '#ff9000', '#a8ff00', '#8fc31f', '#4dae0e', '#00a866', '#088353'];
		function convertTopDc(data) {
		    var result = [];
		    for (var index = 0; index < data.xValues.length; index++) {
		        result.push({
		            value: 10,
		            name: data.xValues[index] + ':' + data.yValues[index]+'TEU/吨',
		            labelLine: {
		                normal:{
		                    show:false
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                            borderWidth:0
		                }
		            }});
		    }
		    result.push({
		        value: 9.8, name: '',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: 'rgba(222,0,0,0)',//g_topDcColor[index],
		                borderWidth: 0
		            }
		        }
		    });
		    result.push({
		        value: 9.9, name: '',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: 'rgba(222,0,0,0)',//g_topDcColor[index],
		                borderWidth: 0
		            }
		        }
		    });
		    return result;
		}

        var s3_4={
            seriesCity:null,
            init:function(){
                this.seriesCity = {
                    name: 'city',
                    type: 'scatter',
                    symbol: 'image://./images/s3-5/icon-dc.png',
                    symbolSize: [16, 26],
                    symbolOffset: [0, -13],
                    geoIndex: 0,
                    coordinateSystem: 'geo',
                    label: {
                        normal: {
                            formatter: function (params) { 
                                return params.value[2];
                            },
                            show: true,
                            textStyle: {
                                color: '#004903',
                                fontSize:18,
                                fontWeight:'bold'
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00ff12'
                        }
                    }
                };
            }
        };

        var g_datCity = null;
        var g_datOrgTable = null;
        var g_areaArr = ['山东','江苏','福建'];
        var g_areaIndex = 0;
        var g_offset = 0;
        var g_offsetMax = 0;
        var g_orgCount = 16;
        $.get(jzcode.data.getUrl('./data/s3-5-area.json'), function (datAreaJson) {
            $.get(jzcode.data.getUrl('./data/com-city-pos.json'), function (datCityJson) {
                $.get(jzcode.data.getUrl('./data/s3-5-table.json'), function (datOrgTable) {
                    g_datArea = datAreaJson;
                    g_datCity = datCityJson;
                    g_datOrgTable = datOrgTable;

                    g_areaIndex = 0;
                    g_offset = 0;
                    g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                    $('#title').html(g_areaArr[g_areaIndex] + '地区堆场总量：' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个');
                    $('#table').empty();
                    for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                        if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length)
                        {
                            var nodeName = g_datOrgTable[g_areaArr[g_areaIndex]][index];
                            if (nodeName.length > 14) {
                                $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2r2">'
                                        + nodeName
                                        + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                            } else {
                                $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2">'
                                        + nodeName
                                        + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                            }
                        }
                  }
                    window.setInterval(function () {
                        g_offset++;
                        if (g_offset > g_offsetMax) {
                            // next  area
                            g_areaIndex++;
                            if (g_areaIndex >= g_areaArr.length) {
                                g_areaIndex = 0;
                                g_offset = 0;
                                g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                                $('#title').html(g_areaArr[g_areaIndex] + '地区堆场总量：' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个');
                            } else {
                                g_offset = 0;
                                g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                                $('#title').html(g_areaArr[g_areaIndex] + '地区堆场总量：' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个');
                            }

                            $('#table').empty();
                            for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                                var nodeName = g_datOrgTable[g_areaArr[g_areaIndex]][index];
                                if (nodeName.length > 14) {
                                    $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2r2">'
                                            + nodeName
                                            + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                                } else {
                                    $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2">'
                                            + nodeName
                                            + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                                }
                            }
                        } else {
                            $('#table').empty();
                            for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                                var nodeName = g_datOrgTable[g_areaArr[g_areaIndex]][index];
                                if (nodeName.length > 14) {
                                    $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2r2">'
                                            + nodeName
                                            + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                                } else {
                                    $('#table').append('<div class="row"><div class="col1">' + (index + 1) + '</div><div class="col2">'
                                            + nodeName
                                            + '</div><div class="col3"><b>' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</b> TEU/吨</div></div>');
                                }
                            }
                        }
                    }, 3000);

                    s3_4.init();
                    option = {
                        graphic: {
                            elements: [{
                                type: 'image',
                                left: 548,
                                top: 241,
                                style: {
                                    image: './images/s3-5/s3-5-total.png'
                                },
                                z: 3
                            }]
                        },
                        geo: [{
                            map: 'china',
                            silent: true,
                            label: {
                                emphasis: {
                                    show: false,
                                    areaColor: '#eee'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: '#9dbbd5',
                                    borderColor: '#fff',
                                    borderWidth: 1
                                }
                            },
                            left: 90,
                            top: 130,
                            bottom: 130,
                            right: '36%',
                            roam: false
                        }
                        ],
                        visualMap: [
                            //{
                            //left: 'left',
                            //top: 'bottom',
                            //text: ['高', '低'],           // 文本，默认为数值文本
                            //calculable: false,
                            //orient: 'horizontal',
                            //itemWidth: 20,
                            //itemHeight: 210,
                            //show: false,
                            //seriesIndex: 0,
                            //inRange: {
                            //    color: ['#d7e3ef', '#6493b7']
                            //},
                            //outRange: {
                            //    color: ['white']
                            //},
                            //left: 140,
                            //top: 840,
                            //textStyle: {
                            //    color: '#fff'
                            //}
                            //}
                        ],
                        series: [
                            {
                                name: 'iphone3',
                                type: 'map',
                                geoIndex: 0,
                                left: 90,
                                top: 130,
                                bottom: 130,
                                right: '36%',
                                roam: false,
                                slient: true,
                                label: {
                                    normal: {
                                        show: false,
                                        textStyle: {
                                            color: '#555577',
                                            fontSize: 20
                                        },
                                        formatter: function (value, index) {
                                            return value.name;
                                        }
                                    },
                                    emphasis: {
                                        show: false,
                                        textStyle: {
                                            color: '#555577',
                                            fontSize: 20
                                        },
                                        formatter: function (value, index) {
                                            return value.name;
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        borderColor: '#fff',//'rgba(0,0,10,0.2)',
                                        borderWidth: 1
                                    }
                                },
                                data: convertMapData(g_datArea)
                            }, s3_4.seriesCity
                        ]
                    };

                    s3_4.seriesCity.data = convertMapPosData(g_datCity, g_datArea);
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }, 'json');
            }, 'json');
        }, 'json');

        register();
    </script>
</body>
</html>